<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选字游戏</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 400px;
            height: 600px;
            border: 1px solid black;
            margin: 0 auto;
            padding-top: 30px;
        }
        header{
            overflow: hidden;
        }
        header p{
            height: 30px;
            line-height: 30px;
            font-size: 20px;
        }
        header p.time {
            float:left;
            margin-left: 20px;
        }
        header p.score{
            float: right;
            margin-right: 20px;
        }
        .showWord{
            width: 100%;
            height: 200px;
            font-size: 150px;
            text-align: center;
            line-height: 200px;
            margin-top: 50px;
        }
        .rule{
            font-size: 24px;
            margin-top: 50px;
        }
        ul{
            list-style: none;
            display: flex;
            margin-top: 100px;
        }
        ul li{
            width: 80px;
            height: 80px;
            font-size: 60px;
            text-align: center;
            line-height: 80px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <header>
            <p class="time">剩余时间：20.00</p>
            <p class="score">得分：0</p>
        </header>
        <p class="showWord">黄</p>
        <p class="rule">根据上面的字的颜色从下边选择正确的字，选择正确自动开始</p>
        <ul>
            <li>黑</li>
            <li>红</li>
            <li>绿</li>
            <li>黄</li>
            <li>蓝</li>
        </ul>
    </div>
</body>
<script>
    var words = ["黑","红","绿","蓝","黄"];
    var colors = ["black","red","green","blue","yellow"];
    
    //用来记录 showWord的文本颜色的下标
    var showIndex = 0;
    
    //获取元素
    var pShowWord = document.querySelector(".showWord");
    
    //随机生成 showWord 的字与颜色
    function  changeColorWithWord () {
        pShowWord.innerHTML = words[randFn()];
        showIndex = randFn();
        pShowWord.style.color = colors[showIndex];
    }
    changeColorWithWord();
    
    function randFn (){
        return Math.floor(Math.random()*5);
    }
    
    var pScore = document.querySelector(".score");
    var pTime = document.querySelector(".time");
    var score = 0;
    var timer = null;
    var t = 20;
    
    //是否开始计时
    var isbegin = true;
    
    //处理 5个li 的事件
    var lis =document.getElementsByTagName("li");
    for (var i = 0;i<5;i++) {
        lis[i].onclick = function () {
            if (this.wordIndex==showIndex) {
                changeColorWithWord();
                changeLis();
                score++;
                pScore.innerHTML = "得分："+score;
            }
            if (score ==1&&isbegin) {
                isbegin = false;
                timer = setInterval(function () {
                    t -= 0.05;
                    pTime.innerHTML = "剩余时间："+t.toFixed(2);//保留小数点后边两位
                    if (t<=0){
                        pTime.innerHTML = "剩余时间：0.00";
                        clearInterval(timer);
                        setTimeout(function() {
                            gameOver();
                        },50)
                    }
                },50)
            }
        }
    }
    
    function gameOver() {
        var grade = score;
        
        score = 0;
        t = 20;
        isbegin=true;
        changeColorWithWord();
        changeLis();
        pScore.innerHTML = "得分：0";
        pTime.innerHTML = "剩余时间：20.00";
        if (grade <=5) {
            alert("太笨啦");
        } else if (grade <=10) {
            alert("加油");
        } else if (grade<=15) {
            alert("不错嘛");
        } else if (grade<=20) {
            alert("六六六啊");
        } else {
            alert("看到这个有大红包呦！");
        }
    }
    function changeLis() {
        var wordArr = [0,1,2,3,4];
        var colorArr = [0,1,2,3,4];
        //随机打乱文字下标
        wordArr.sort(function() {
            var num = 0.5-Math.random();
            return num;
            //sort 会选择两个数比较，如果不给参数，则根据 ASCII 表比较，如果给了如上参数，则根据 num 的返回值的正负来决定是否互换两个数
            //如果 num>0则互换两个数的位置
        });
        //随机打乱颜色下标
        colorArr.sort(function () {
            var num = 0.5-Math.random();
            return num;
        });
        for(var i = 0;i <5;i++) {
            lis[i].wordIndex = wordArr[i];
            lis[i].innerHTML = words[wordArr[i]];
            lis[i].style.color = colors[colorArr[i]];
        }
    }
    changeLis();
</script>
</html>






